<template>
    <i :class="cns"></i>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import {Icon} from '../../shared/config'
export default defineComponent({
    props:{
        hover:{type:Boolean},
        icon:{type:String},
        rightFixed:{type:Boolean,default:false},
        type:{type:String}
    },
    setup(props) {
        const cns = computed(()=>{
            const cns = ['ph-icon',Icon.icon]
            if(props.icon)
                cns.push(Icon.prefix+props.icon)
            if(props.rightFixed)
                cns.push('ph-icon-right-fixed')
            if(props.hover)
                cns.push('ph-pointer')
            if(props.type)
                cns.push('ph-icon-'+props.type)
            return cns
        })
        return {cns}
    },
})
</script>
<style lang="scss">
.ph-icon{
    display: inline-block;
    text-align: center;
    &-right-fixed{
        position: absolute;
        right: var(--ph-5);
        top: 50%;
        transform: translateY(-50%);
    }
    &[ph-mr]{
        margin-right: var(--ph-5);
    }
    &-success{color:var(--ph-success)}
    &-primary{color:var(--ph-primary)}
    &-danger{color:var(--ph-danger)}
    &-warning{color:var(--ph-warning)}
    &-info{color:var(--ph-info)}
}
.ph-page{
    .ph-icon{
        min-width: var(--phx);
    }
}
</style>